// 绘制网格
function drawGrid(x = 100, y = 100) {
  // 横线
  const strX = []
  for (let i = 10; i < x; i+=10) {
    strX.push(`<path d="M 0 ${i} H ${y}" fill="none" stroke="#666" stroke-width="1" stroke-dasharray="2,2"></path>`)
  }

  // 纵线
  const strY = []
  for (let j = 10; j < y; j+=10) {
    strY.push(`<path d="M ${j} 0 V ${x}" fill="none" stroke="#666" stroke-width="1" stroke-dasharray="2,2"></path>`)
  }

  return (`
    <svg viewBox="0 0 ${x} ${y}" fill="currentColor">
      <g>
        /* 贝塞尔曲线 */
        <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="green" fill="transparent"/>
        <circle r="2" cx="10" cy="10" fill="red"></circle>
        <circle r="2" cx="20" cy="20" fill="red"></circle>
        <path d="M 10 10 L 20 20" stroke="red"/>
        <path d="M 50 10 L 40 20" stroke="red"/>
        <circle r="2" cx="50" cy="10" fill="red"></circle>
        <circle r="2" cx="40" cy="20" fill="red"></circle>
        <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
        <path d="M 10 80 L 40 10" stroke="red"/>
        <path d="M 65 10 L 95 80" stroke="red"/>
        <circle r="2" cx="95" cy="80" fill="red"></circle>
        <circle r="2" cx="150" cy="150" fill="red"></circle>
        <circle r="2" cx="180" cy="80" fill="red"></circle>
        /* 纵列 */
        ${strX.join('')}
        /* 纵列 */
        ${strY.join('')}
      </g>
    </svg>
  `)
}

// 绘制贝塞尔曲线
function drawBezier() {

}

function main() {
  const container = document.querySelector('.container')
  const gridStr = drawGrid(200, 200)
  container.insertAdjacentHTML('afterbegin', gridStr)
}

main();